<template>
    <div class="all_mask" @click="$parent.showMyPlayList = false">
        <div class="part_list">
            <SongListItem v-for="item in currentPLayList" :key="item.id" :item="item"
             @click.native="$emit('update:currentSong', item)" :currentSong="currentSong"/>
        </div>
    </div>
</template>

<script>
import SongListItem from '@/components/SongListItem.vue'
export default {
    components: {
        SongListItem,
    },
    props: ["currentPLayList", "currentSong"],
}
</script>

<style lang="less">
    .all_mask {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        background-color: #cccccc4d;
        .part_list {
            width: 90vw;
            height: 60%;
            bottom: 50px;
            margin-left: 5vw;
            position: fixed;
            overflow: auto;
            border-radius: 20px;
            background-color: #FFFFFF;
        }
    }
</style>